<template>
    <div class="right-content">
        <div v-if="props.type == 'seckill'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :tabparam="activeName"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'groupbuy'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :tabparam="activeName"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'text'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'wecom'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'images'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'category'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :is="type && list[props.type]['com']"
                :data="data"
                :comIndex="props.comIndex"
                :form="props.form"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'product'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :tabparam="activeName"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <div v-if="props.type == 'coupon'">
            <div class="title">{{ list[props.type].tit }}</div>
            <component
                :key="index"
                :is="type && list[props.type]['com']"
                :data="data"
                :tabparam="activeName"
                :comIndex="props.comIndex"
                :components="props.components"
                @changeSetting="changeSetting"></component>
        </div>
        <el-tabs v-model="activeName" @tab-change="changeTab" v-else>
            <div v-if="['video', 'search', 'edit', 'info'].includes(props.type)">
                <el-tab-pane :label="list[props.type].tit" name="1"></el-tab-pane>
                <component
                    :is="type && list[props.type]['com']"
                    :data="data"
                    :comIndex="props.comIndex"
                    :tabparam="activeName"
                    :form="props.form"
                    :components="props.components"
                    @changeSetting="changeSetting"></component>
            </div>

            <!-- <div v-if="props.type == 'product'">
                <el-tab-pane
                    :label="item.name"
                    :name="item.value"
                    v-for="item in productList"
                    :key="item"></el-tab-pane>
                <component
                    :key="index"
                    :is="type && list[props.type]['com']"
                    :data="data"
                    :tabparam="activeName"
                    :comIndex="props.comIndex"
                    :components="props.components"
                    @changeSetting="changeSetting"></component>
            </div> -->
            <!-- <div v-if="props.type == 'images'">
                <el-tab-pane :label="item.name" :name="item.value" v-for="item in imgList" :key="item"></el-tab-pane>
                <component
                    :key="index"
                    :is="type && list[props.type]['com']"
                    :data="data"
                    :tabparam="activeName"
                    :comIndex="props.comIndex"
                    :components="props.components"
                    @changeSetting="changeSetting"></component>
            </div> -->
        </el-tabs>
    </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import goodsOpt from '../options/goodsOpt.vue';
import ImageOpt from '../options/imageOpt.vue';
import searchOpt from '../options/searchOpt.vue';
import categoryOpt from '../options/categoryOpt.vue';
import seckillOpt from '../options/seckillOpt.vue';
import groupbuyOpt from '../options/groupbuyOpt.vue';
import Info from '../options/info.vue';
import couponOpt from '../options/couponOpt.vue';
import titleTextOpt from '../options/titleTextOpt.vue';
import wecomOpt from '../options/wecomOpt.vue';

const emit = defineEmits(['changeOptions', 'changeTab']);
const activeName = ref('1');
const props = defineProps({
    type: {
        type: String,
        default: 'info'
    },
    comIndex: {
        type: Number
    },
    components: {
        type: Array,
        default: () => []
    },
    form: {
        type: Object,
        default: () => {}
    }
});
const productList = ref([
    { name: '一行一个', value: '1' },
    { name: '一行两个', value: '2' },
    { name: '一行三个', value: '3' },
    { name: '一行四个', value: '4' }
]);
const imgList = ref([
    { name: '图广单图', value: '1' },
    { name: '图广双图', value: '2' },
    { name: '图广三图', value: '3' },
    { name: '图广滑动', value: '4' }
]);
const list = reactive({
    info: {
        tit: '页面信息',
        com: Info
    },
    text: {
        tit: '标题文本',
        com: titleTextOpt
    },
    images: {
        tit: '图片广告',
        com: ImageOpt
    },
    product: {
        tit: '',
        com: goodsOpt
    },
    edit: {
        tit: '商品组件',
        com: 'Images'
    },
    seckill: {
        tit: '秒杀',
        com: seckillOpt
    },
    groupbuy: {
        tit: '拼团',
        com: groupbuyOpt
    },
    video: {
        tit: '图片',
        com: 'Images'
    },
    category: {
        tit: '分类导航',
        com: categoryOpt
    },
    search: {
        tit: '搜索组件',
        com: searchOpt
    },
    coupon: {
        tit: '优惠券',
        com: couponOpt
    },
    wecom: {
        tit: '添加企微',
        com: wecomOpt
    }
});
const changeSetting = val => {
    if (
        props.type == 'product' ||
        props.type == 'images' ||
        props.type == 'category' ||
        props.type == 'seckill' ||
        props.type == 'groupbuy' ||
        props.type == 'coupon'
    ) {
        let { imgList, contentList, groupType } = val;
        imgList = JSON.stringify(imgList);
        contentList = JSON.stringify(contentList);
        groupType = JSON.stringify(groupType);
        if (contentList) {
            Object.assign(val, { contentList });
        }
        if (groupType) {
            Object.assign(val, { groupType });
        }
        Object.assign(val, { imgList });
        emit('changeOptions', val);
    } else if (props.type == 'info') {
        emit('changeOptions', val);
    } else {
        emit('changeOptions', val);
    }
};
const changeTab = item => {
    activeName.value = item;
};
watch(
    () => props.comIndex,
    val => {
        if (props.type !== 'info') {
            if (props.components.length) {
                activeName.value = Object.keys(props.components[val].options).length
                    ? props.components[val].options.tabs
                    : '1';
            } else {
                activeName.value = '1';
            }
        }
    },
    { immediate: true }
);
</script>
<style lang="scss" scoped>
.right-content {
    padding: 24px;
    width: 382px;
    height: calc(100vh - 100px);
    background: #ffffff;
    overflow: auto;
    z-index: 1;
    .title {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #33302d;
        line-height: 22px;
    }
}
</style>
